<template>
	<scroll-view class="list-scroll" scroll-y @scrolltolower="getList()" @refresherrefresh="getList(true)"
		:refresher-enabled="true" :refresher-triggered="refresherTriggered">
		<view>
			<view class="view-table">
				<view class="view-thead">
					<view class="view-tr">
						<view class="view-th col1">序号</view>
						<view class="view-th col2">联合国编号</view>
						<view class="view-th col3">描述</view>
						<view class="view-th col4">详情</view>
					</view>
				</view>
				<view class="view-tbody">
					<view class="view-tr" v-for="(item,index) in list" :key="index">
						<view class="view-td col1">{{index+1}}</view>
						<view class="view-td col2">UN {{item.unCode}}</view>
						<view class="view-td col3">{{item.chnNameAndDescribe}}</view>
						<view class="view-td col4"><text class="detail"
								@click="$goBack('./detail?id='+item.id)">详情&gt;&gt;</text></view>
					</view>
				</view>
			</view>
		</view>
		<empty-waybill v-show="list.length==0&&!loading"></empty-waybill>
		<view class="get-more" v-show="andMore">
			加载中<text class="uni-icon">&#xe465;</text>
		</view>
		<view class="get-more" v-show="!andMore">
			<text>没有更多了</text>
		</view>
	</scroll-view>
</template>

<script>
	import emptyWaybill from "@/components/tool-empty/waybill";
	export default {
		components: {
			emptyWaybill
		},
		data() {
			return {
				refresherTriggered: false,
				loading: false,
				list: [],
				pages: {
					size: 20, // 每次加载的数量
					current: 1, // 记录当前页
					total: '', // 记录总数
				},
				formData: {
					unCode: "",
					chnNameAndDescribe: "",
					termOther: "",
				}
			}
		},
		computed: {
			andMore() {
				// 计算是否还有更多
				return this.pages.total !== this.list.length;
			}
		},
		methods: {
			// 加载，刷新
			getList(isRefresh) {
				if (isRefresh) {
					this.pages.current = 1;
					this.list = [];
					this.refresherTriggered = true;
				} else {
					if (this.andMore) {
						this.pages.current++;
					} else {
						return;
					}
				}
				this.loading = true;

				const formData = {
					...this.formData,
					...this.pages
				}
				this.$api.dangerousKnowPage(formData).then(res => {
					this.refresherTriggered = false;
					this.loading = false;
					const resData = res.data.data;
					this.list.push(...resData.records);
					this.pages.total = resData.total;
				})
			},
			// 模拟请求
		},
		onLoad(params) {
			this.formData.termOther = params.type;
			this.getList(true);
		}
	}
</script>

<style lang="scss">
	@keyframes myMove {
		from {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg);
		}
	}


	.list-scroll ::v-deep {
		height: 100vh;
		background: #fff;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
	}

	.view-table ::v-deep {
		width: 100%;
		border-collapse: collapse;
		border-left: 1rpx solid #B5B9CD;
		border-top: 1rpx solid #B5B9CD;
		box-sizing: border-box;

		.view-tr {
			display: flex;

			.view-th,
			.view-td {
				border-right: 1rpx solid #B5B9CD;
				border-bottom: 1rpx solid #B5B9CD;
				font-size: 28rpx;
				padding: 18rpx 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.view-th {
				line-height: 36rpx;
				color: #333;
				background: #EBEDF2;
				white-space: nowrap;
			}

			.view-td {
				line-height: 34rpx;
				color: #343434;


				.detail {
					color: #007AFF;
				}
			}

			.col1 {
				width: 3em;
			}

			.col2 {
				width: 5em;
			}

			.col3 {
				flex: 1;
			}

			.col4 {
				width: 3.5em;
			}
		}
	}

	.get-more {
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;

		.uni-icon {
			vertical-align: middle;
			margin-left: 20rpx;
			font-size: 40rpx;
			animation: myMove 2s linear infinite;
		}
	}
</style>
